<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>I’m QQ-每一天，乐在沟通</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        *{
    /*初始化边距*/
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;/*无下划线*/
}
.nav-header{
    height: 75px;
    width: 100%;
    /*渐变颜色*/
    background-color: #8EC5FC;
    background-image: linear-gradient(318deg, #8EC5FC 0%, #ffffff 100%);
}
.head-contain{
    width: auto;
    height:75px;
}
.nav-logo,.nav-top,.nav-top li,.nav-fill,.tools-top,.tools-right,.tools-right li{
    height: 75px;
    display: inline-block;
    vertical-align: top;/**/
}
.nav-top li,.tools-top a,.tools-right li{
    width: 75px;
    line-height: 75px;
}
.nav-logo{
    padding-left: 300px;
}
.nav-top{/*调整边距*/
    padding-left: 18px;
}
.nav-top li a{
    text-align: center;
    display: block;
    color: black;
}
.nav-top li a:hover{/*鼠标悬停*/
    background: #04a8cb;
}
.nav-fill{
    padding-left: 250px;
}
.tools-top a{
    margin-top: 18px;
    width: 96px;
    height: 39px;
    line-height: 39px;
    border-radius: 25px;
    text-align: center;
    display: block;
    font-weight: bold;
    color: white;
    background: #00bce5;
}
.tools-right{/*调整边距*/
    padding-left: 30px;
}
.tools-right li a{
    font-size: small;
    color: black;
}
.tools-right li a:hover{/*鼠标悬停*/
    color: #02d3ff;
}
    body{background-color: #00bce5;background-image: url(image/pc_bg.jpg);background-repeat: no-repeat;background-position:right top ;}
/*copyright*/
.copyright{
    position: absolute;
    top: 1200px;
    left: 700px;
}

.copyright_text{
    color: rgb(126,126,126);
    font-size: small;
}    
    </style>
</head>
<body>
    <div>
        <!--头部-->
        <header class="nav-header">
            <div class="nav-contain">
                <a href="https://im.qq.com/index" class="nav-logo"><img src="image/2.png" width="106" height="76"></a>
                <nav class="nav-top">
                    <ul>
                        <li><a href="https://im.qq.com/index">首页</a></li>
                        <li><a href="https://im.qq.com/download">下载</a></li>
                        <li><a href="https://im.qq.com/news">动态</a></li>
                    </ul>
                </nav>
                <div class="nav-fill"></div>
                <div class="tools-top">
                    <a href="https://ssl.zc.qq.com/v3/index-chs.html" class="tools-login">注册</a>
                </div>
                <div class="tools-right">
                    <ul>
                        <li><a href="https://vip.qq.com/">QQ会员</a></li>
                        <li><a href="https://aq.qq.com/cn2/index">QQ安全</a></li>
                        <li><a href="">登录</a></li>
                    </ul>
                </div>
            </div>
        </header>
    </div>   
    <div class="newfoot">
        <div class="qmaps">
            <h1>了解热门产品</h1>
        </div>
    </div>
    <!--版权-->
    <div  class="copyright" >
        <span class="copyright_text">
            Copyright &copy; 1998 - 2021 Tencent . All Rights Reserved
            <br>
            腾讯公司 版权所有
            <br>
            <br>
            <br>
            <br>
            <br>
        </span>
    </div>
</body>
</html>
